<template>
  <div class="container">
    <div id="prev" @click="closeDetail"/>
    <el-card shadow="always">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 45px">
        <el-breadcrumb-item :to={}>
          <span @click="closeDetail">首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{}">
          <span @click="closeDetail">精彩活动</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>关于2022的招生计划</el-breadcrumb-item>
      </el-breadcrumb>

      <el-button style="position: absolute; top: 110px;  right: 20px; font-size: 20px;" type="text"
                 @click="closeDetail">
        <i class="el-icon-circle-close"/>
      </el-button>
      <h1>{{ activity.title }}</h1>
      <div class="info">
        <span>作者：{{ activity.author }}</span>
        <span>发布时间：{{ activity.blogCreateTime }}</span>
        <span>小队：{{ activity.teamName }}</span>
        <span>学院：{{ collegeMap[activity.collegeId] }}</span>
      </div>
      <hr>
      <p v-html="activity.blog"></p>
    </el-card>
  </div>
</template>
<script>
import RequestUtil from "@/utils/RequestUtil";

export default {
  props: {
    activityId: Number
  },

  data() {
    return {
      activity: {},
      collegeMap: {},
    }
  },
  created() {
    this.getBlogDetail();
    this.collegeMap = RequestUtil.listToMap(
        RequestUtil.sendCacheableRequest("collegeList", '/auth/getCollegeList')
    )
  },
  methods: {
    getBlogDetail() {
      let _this = this
      this.$axios.get(`${this.HOST}/activity/auth/blog/${this.activityId}`).then(res => {
        this.activity = res.data.data;
        console.log("r", res)
      })
    },
    closeDetail() {
      this.$emit("showList")
      clearTimeout(this.timer); //清除延迟执行
      let _this = this;
      this.timer = setTimeout(() => {
        _this.$emit("doActivityDetail", 0)
        _this.$emit("closeDetail")
      }, 200);
    }
  }
}
</script>
<style lang="less" scoped>

.el-card {
  margin-bottom: 50px;
}

#prev {
  width: 100%;
  height: 100px;
  cursor: pointer;
}

.container {
  height: 100%;
}

h1 {
  font-size: 24px;
}

.info {
  font-size: 90%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: gray;

  span {
    margin-left: 30px;
  }
}

</style>
